<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>



    <link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/vendor/skycons/css/skycons.css" rel="stylesheet" />
    <link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" />

    <!-- Plugins CSS-->
    <link href="/plugins/bootkit/css/bootkit.css" rel="stylesheet" />
    <link href="/plugins/scrollbar/css/mCustomScrollbar.css" rel="stylesheet" />
    <link href="/plugins/fullcalendar/css/fullcalendar.css" rel="stylesheet" />
    <link href="/plugins/jquery-ui/css/jquery-ui-1.10.4.min.css" rel="stylesheet" />
    <link href="/plugins/xcharts/css/xcharts.min.css" rel="stylesheet" />
    <link href="/plugins/morris/css/morris.css" rel="stylesheet" />

    <!-- Theme CSS -->
    <link href="/css/jquery.mmenu.css" rel="stylesheet" />

    <!-- Page CSS -->
    <link href="/css/style.css" rel="stylesheet" />
    <link href="/css/add-ons.min.css" rel="stylesheet" />
</head>
<body  >
   <div class="wrapper" style="margin:100px auto; width: 500px;">
      <div class="block-center mt-xl wd-xl">
         <div class="panel panel-dark panel-flat">
            <div class="panel-heading text-center">
               <button style="color:#fff;" type="button" data-dismiss="modal" class="close">
                 <span>×</span>
               </button>
               <a href="/" style="color:#fff;">Favorites</a>
            </div>
            <div class="panel-body">
              <!--<form id="collect-form" class="form-horizontal" onsubmit="return false">-->
               <div id="show2" >
               		<div class="mb">
                     网页标题
                     <input readonly="readonly"  name="title" id="title" class="form-control" cols="30" rows="2" th:value="${title}" placeholder="网页标题"></input>
                  </div>
                  <div class="mb">
                     网页描述
                     <input readonly="readonly"  name="desctription" id="cdescription" class="form-control" cols="30" rows="2" th:value="${description}" placeholder="网页描述"></input>
                  </div>
                  <div class="mb">
                    链接地址
                     <input readonly="readonly" name="url" id="url" class="form-control" cols="30" rows="2" th:value="${url}" placeholder="链接地址" ></input>
                  </div>
                   <div class="mb">
                       网页logo链接地址
                     <input readonly="readonly"  name="logoUrl" id="logoUrl" class="form-control" cols="30" rows="2" th:value="${logoUrl}" placeholder="网页logo链接地址" ></input>
                   </div>
                   <!--<div class="mb">
                       所属类别
                       <select name="category" id="ccategory" class="form-control" >
                           <option value="">&#45;&#45;请选择&#45;&#45;</option>
                           <option value="TRAVEL">旅行</option>
                           <option value="FOOD">料理</option>
                           <option value="EXERCISE">健身</option>
                           <option value="PHOTOGRAPH">摄影</option>
                           <option value="MUSIC">音乐</option>
                           <option value="REARING">育儿</option>
                           <option value="LOVE">恋爱</option>
                           <option value="BUSINESS">创业</option>
                           <option value="ART">美术设计</option>
                           <option value="MANAGER">产品经理</option>
                           <option value="MARKET">市场营销</option>
                           <option value="RUNNING">运营</option>
                       </select>
                   </div>-->
               </div>


                  <label style="font-weight:normal;margin-bottom:0;">
                     <input id="type" type="checkbox" name="type" class="mb" value="0" /> 私密收藏</label>
               <p class="pt-lg text-center">选择一个收藏夹</p>
               <div class="collect-sort-folder">
                   <div class="collect-tab-head">
                      <a href="javascript:void(0);">我的收藏夹</a>
                   </div>
                   <div class="collect-tab-body">
                      <div class="wrap">
                          <div id="smartFavoritesList" class="sort">

                          </div>
                      </div>
                      <div class="wrap">
                          <div class="folder">
                              <select name="favoritesId" id="favoritesSelect" class="mb form-control" >

                              </select>
                             <!-- <select  name="favoritesId" id="favoritesSelect" class="mb form-control">
                                  <option th:each="favorites : ${favoritesList}" th:value="${favorites.id}" th:text="${favorites.name}"  th:selected="(${favorites.id} == ${configObj.defaultFavorties})"></option>
                              </select>-->
                          </div>
                      </div>
                   </div>
               </div>
               <button id="ccollect" class="mt-lg btn btn-primary btn-block"style="margin-top:20px;" onclick="collectPages()">提交</button>
               <input type="hidden" name="id" id="ccollectId" value=""/>
               <input type="hidden" id="userCheck" value=""/>
               <input type="hidden" name="url" id="curl" value=""/>

               <p></p>


            </div>
         </div>
      </div>
   </div>

   <script>

       window.onload= function () {
           $.ajax({
               type:"POST",
               dataType:"JSON",
               contentType: "application/json;charset=UTF-8",
               url:"/getFavorites",
               data:JSON.stringify({
                   id:localStorage.getItem("id")
               }),
               beforeSend: function (XMLHttpRequest) {
                   XMLHttpRequest.setRequestHeader("token",localStorage.getItem("token"));
               },

               success:
                   function (Response) {

                       $("#favoritesSelect").html( "<option selected='selected' value=\"\">--请选择--</option>");
                       Response.msg.forEach(function (item,index) {

                           $("#favoritesSelect").html(
                               $("#favoritesSelect").html()+"<option value="+item.id+">"+item.name+"</option>"
                           )
                       })
                   }
           })
       }
       function collectPages() {
           $.ajax({
               type:"POST",
               dataType:"JSON",
               contentType: "application/json;charset=UTF-8",
               url:"/collect",
               data:JSON.stringify({
                   userId:localStorage.getItem("id"),
                   favoritesId:$("#favoritesSelect").val(),
                   category:$("#cdescription").val(),
                   remark:$("#cremark").val(),
                   title:$("#title").val(),
                   url:$("#url").val(),
                   logoUrl:$("#logoUrl").val()
               }),
               beforeSend: function (XMLHttpRequest) {
                   XMLHttpRequest.setRequestHeader("token",localStorage.getItem("token"));
               },
               success:
                   function (Response) {
                       console.log(Response.code);
                            if(Response.code == 0)
                                alert("收藏成功!");

                            else
                                alert("收藏失败");
                   },
                   error:function(){
                   alert("收藏失败");
                   }
           })
       }

   </script>
   <!-- Vendor JS-->
   <script src="/vendor/js/jquery.min.js"></script>
   <script src="/vendor/js/jquery-2.1.1.min.js"></script>
   <script src="/vendor/js/jquery-migrate-1.2.1.min.js"></script>
   <script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
   <script src="/vendor/skycons/js/skycons.js"></script>

   <!-- Plugins JS-->
   <script src="/plugins/jquery-ui/js/jquery-ui-1.10.4.min.js"></script>
   <script src="/plugins/scrollbar/js/jquery.mCustomScrollbar.concat.min.js"></script>
   <script src="/plugins/bootkit/js/bootkit.js"></script>
   <script src="/plugins/moment/js/moment.min.js"></script>
   <script src="/plugins/fullcalendar/js/fullcalendar.min.js"></script>
   <script src="/plugins/touchpunch/js/jquery.ui.touch-punch.min.js"></script>
   <script src="/plugins/flot/js/jquery.flot.min.js"></script>
   <script src="/plugins/flot/js/jquery.flot.pie.min.js"></script>
   <script src="/plugins/flot/js/jquery.flot.resize.min.js"></script>
   <script src="/plugins/flot/js/jquery.flot.stack.min.js"></script>
   <script src="/plugins/flot/js/jquery.flot.time.min.js"></script>
   <script src="/plugins/xcharts/js/xcharts.min.js"></script>
   <script src="/plugins/autosize/jquery.autosize.min.js"></script>
   <script src="/plugins/placeholder/js/jquery.placeholder.min.js"></script>
   <script src="/plugins/datatables/js/dataTables.bootstrap.min.js"></script>
   <script src="/plugins/datatables/js/jquery.dataTables.min.js"></script>
   <script src="/plugins/raphael/js/raphael.min.js"></script>
   <script src="/plugins/morris/js/morris.min.js"></script>
   <script src="/plugins/gauge/js/gauge.min.js"></script>
   <script src="/plugins/d3/js/d3.min.js"></script>
</body>
</html>